<template>
  <div class="user-center-index">
    <el-container style="height: 100%">
      <el-aside style="padding: 5px" width="250px">
        <el-menu
            :collapse="isCollapse"
            class="el-menu-vertical-demo"
            unique-opened
            @close="handleClose"
            @open="handleOpen"
            @select="handleSelect">
          <el-submenu v-for="(item,index) in subMenuList" :index="String(index)">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="(child,i) in item.child" :index="String(i)" @click="handleLink(index,i)">
                {{ child.title }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>


        </el-menu>
      </el-aside>


      <el-container>
        <el-header>
          <div class="header-box flex-row-between">
            <i class="el-icon-s-grid" @click="isCollapse=!isCollapse"></i>
            <BackButton :auto-position="false" style="position: absolute;right: 10px;top: 10px"></BackButton>
            <div class="flex-row-center">
              <div>欢迎您![{{ user.userNick }}]</div>
              <UserAvatarMenu></UserAvatarMenu>
            </div>

          </div>
        </el-header>
        <el-main style="box-shadow:  0 2px 12px 0 rgba(0, 0, 0, 0.1);padding: 5px 10px;height: 100%">
          <el-breadcrumb separator="/" style="margin: 10px 0">
            <el-breadcrumb-item v-for="(item) in historyPath" :to="{ path: item.to }">{{ item.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <router-view>

          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import BackButton from "@/components/button/BackButton.vue";
import UserAvatarMenu from "@/components/Menu/UserAvatarMenu.vue";

export default {
  name: "index",
  components: {UserAvatarMenu, BackButton},
  data() {

    return {
      isCollapse: false,
      user: {
        userNick: "",
        avatar: "",
      },
      historyPath: [],
      subMenuList: [
        {
          title: "个人中心",
          icon: "el-icon-user-solid",
          child: [
            {
              title: "我的信息",
              to: "/bg/user/info"
            }
          ]
        },
        {
          title: "文章",
          icon: "el-icon-notebook-1",
          child: [
            {
              title: "我的文章",
              to: "/bg/article/info"
            },
            {
              title: "收藏文章",
              to: "/bg/article/collect"
            },
            {
              title: "分类管理",
              to: "/bg/article/type"
            },
            {
              title: "评论管理",
              to: "/bg/article/comment"
            }
          ]
        },
        {
          title: "领养",
          icon: "el-icon-collection-tag",
          child: [
            {
              title: "申请记录",
              to: ""
            }
          ]
        },
      ]
    }
  },
  methods: {
    initUser() {
      let usr = this.$store.state.userOption.user;
      if (usr) {
        this.user = usr
      }
    },
    handleLink(index, childIndex) {
      this.$router.push(this.subMenuList[index].child[childIndex].to)
    },
    handleSelect(index, indexPath) {
      if (this.historyPath.length > 1) {
        this.historyPath.pop()
      }
      let item = this.subMenuList[indexPath[0]]
      this.historyPath.push(item.child[index])
    },
    handleOpen(index, indexPath) {
      this.historyPath = []
      this.historyPath.push(this.subMenuList[index])
    },
    handleClose(index) {

    }
  },
  created() {
    this.initUser()
  }
}
</script>

<style lang="less" scoped>
.user-center-index {
  height: 100vh;

  .header-box {
    width: 90%;
    height: 90%;
    padding: 5px;

    i {
      float: left;
      left: 10px;
      cursor: pointer;
      font-size: 20px;
      margin-right: 5px;

      &:hover {
        color: dodgerblue;
      }
    }

    div {
      float: right;
      right: 10px;
      margin-left: 5px;
    }
  }
}
</style>